import * as React from 'react';
import HigherChart from '../../component/chart/HigherChart';
import chartData from './chartData';

import WorkViewComponent, { IWorkViewProps } from '../../component/common/WorkViewComponent';

export const RootHash = '#/report';

export default class Report extends WorkViewComponent<IWorkViewProps, any> {

  constructor(props: IWorkViewProps) {
    super(props);
    this.state = ({
      chart: {
        shape: 'spline',
        data: chartData.slice(0, chartData.length / 2 - 1),
        width: 500,
        height: 250,
        plotCfg: {
          margin: [10, 100, 50, 120],
        },
      }
    });
  }

  changeHandler = () => {
    const {chart} = this.state;
    // if (chart.shape === 'spline' || chart.width !== 600) {
    //   chart.shape = 'line';
    //   chart.width = 600;
    // } else {
    //   chart.shape = 'spline';
    //   chart.width = 500;
    // }
    if (chart.width !== 600) {
      chart.width = 600;
    } else {
      chart.width = 700;
    }
    this.setState({
      chart
    });
  }

  render() {
    return (
      <div>
        <HigherChart
          {...this.state.chart}
        />
        <button onClick={this.changeHandler}>Change shape</button>
      </div>
    );
  }
}
